<template>
  <el-dialog :visible.sync="visible" width="1200px" @close="cancel">
    <div v-loading="loading">
      <el-table :data="data" border fit>
        <el-table-column label="入库单号" prop="code" align="center" width="138" />
        <el-table-column label="入库虚拟仓" prop="virtual_warehouse" align="center" min-width="100" />
        <el-table-column label="入库实体仓" prop="entity_warehouse" align="center" width="110" />
        <el-table-column label="审核状态" prop="audit_status_text" align="center" width="120" />
        <el-table-column label="入库状态" prop="warehousing_status_text" align="center" width="120" />
        <el-table-column label="创建人" prop="created_by_name" align="center" width="112" />
        <el-table-column label="创建时间" prop="created_at" align="center" width="174" />
        <el-table-column label="修改人" prop="updated_by_name" align="center" width="112">
          <template slot-scope="scope">
            {{ scope.row.updated_by_name || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="updated_at" align="center" width="174">
          <template slot-scope="scope">
            {{ scope.row.updated_at || '-' }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      <div class="dialog-footer-center">
        <span>
          <el-button @click="cancel">返回</el-button>
        </span>
      </div>
    </div>

  </el-dialog>
</template>

<script>
export default {
  name: 'PreDistributionInfoDialog',
  data() {
    return {
      data: [],
      url: '',
      visible: false,
      loading: false,
      queryParam: {
        page: 1,
        limit: 10
      }, // 搜索参数
      paginate: {
        sizes: [10, 15, 20, 30, 50],
        limit: 10,
        layout: 'prev, pager, next, sizes',
        current: 0,
        total: 0
      }
    }
  },
  computed: {},
  created() {},
  methods: {
    // 显示
    show(id) {
      const vm = this
      vm.id = id
      vm.getList()
      vm.visible = true
    },
    // 关闭
    cancel() {
      const vm = this
      vm.data = []
      vm.id = ''
      vm.visible = false
    },
    // 获取列表
    getList() {
      const vm = this
      const { page, limit } = vm.queryParam
      const params = { page, limit }
      vm.loading = true
      vm.$http.get(`/transhipment-order/warehouse-order/${vm.id}`, { params }).then(res => {
        vm.data = res.data
        vm.handlePaginateResponse(res)
        vm.loading = false
      }).catch(() => {
        vm.loading = false
      })
    },
    handleSizeChange(val) {
      this.handlePaginateParams(val)
    },
    handleCurrentChange(val) {
      this.handlePaginateParams(0, val)
    },
    // 处理分页参数
    handlePaginateParams(limit = 0, page = 0) {
      if (limit) {
        this.queryParam.limit = limit
        this.paginate.limit = limit
      }
      if (page) {
        this.queryParam.page = page
        this.paginate.current = page
      }
      this.getList()
    },
    handlePaginateResponse(response) {
      if (response.limit !== undefined) {
        this.paginate.total = response.count
        this.paginate.limit = response.limit
        this.paginate.current = response.current
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pre-distribution {
  min-height: 300px;
}
</style>
